<template>
  <div class="option-editor">
    <div v-for="(option, index) in options" :key="index" class="option-item">
      <el-input-group>
        <el-input v-model="option.label" placeholder="选项标签" style="width: 100px" />
        <el-input v-model="option.value" placeholder="选项内容" />
        <el-button type="danger" @click="removeOption(index)" :icon="Delete">删除</el-button>
      </el-input-group>
    </div>
    <el-button type="primary" @click="addOption" :icon="Plus">添加选项</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { Plus, Delete } from '@element-plus/icons-vue';

interface Option {
  label: string;
  value: string;
}

const props = defineProps<{
  modelValue: string;
}>();

const emit = defineEmits(['update:modelValue']);

const options = ref<Option[]>([]);

// 初始化选项
watch(() => props.modelValue, (newVal) => {
  if (newVal) {
    try {
      options.value = JSON.parse(newVal);
    } catch {
      options.value = [];
    }
  } else {
    options.value = [];
  }
}, { immediate: true });

// 监听选项变化
watch(options, (newVal) => {
  emit('update:modelValue', JSON.stringify(newVal));
}, { deep: true });

// 添加选项
const addOption = () => {
  options.value.push({
    label: String.fromCharCode(65 + options.value.length), // A, B, C...
    value: ''
  });
};

// 删除选项
const removeOption = (index: number) => {
  options.value.splice(index, 1);
  // 重新生成标签
  options.value.forEach((opt, idx) => {
    opt.label = String.fromCharCode(65 + idx);
  });
};
</script>

<style scoped>
.option-editor {
  .option-item {
    margin-bottom: 10px;
  }
}
</style> 